<template>
  <div class="ten_box">
    <m-header modile-title="仿单选" go-back="true"></m-header>
    <div class="radio_main">
      <div class="radio_li" v-for="(item,index) in stasicData" :key="index">
        <p>{{index+1}}.{{item.title}}</p>
        <div class="radio_box">
          <div
            class="radio_single"
            v-for="(text_item,text_value,text_index) in text"
            :key="text_index"
            :class="[checkIndex(index,text_index) ? 'active' : '']"
            @click="chose(index,text_item,text_index,item)">{{text_item}}</div>
        </div>
      </div>

      <button @click="getParams">click me</button>
    </div>
  </div>
</template>
<style lang="scss">
  .ten_box {
    padding-top: 60px;

    .radio_main {
      .radio_li {
        border-bottom: 10px solid #cccccc;
        padding: 10px;

        p {
          font-size: 24px;
          padding: 10px;
        }

        .radio_box {
          width: 100%;
          display: flex;
          flex-wrap: wrap;

          .radio_single {
            width: 30%;
            text-align: center;
            border: 1px solid #333333;
            margin-left: 2.5%;
            padding: 10px 0;
            border-radius: 10px;
            font-size: 20px;
            color: #333333;
            margin-top: 10px;
          }

          .active {
            background: #007aff;
            color: white;
          }
        }
      }
    }

  }
</style>
<script>
  import {voteData} from '../../../../api/data'
  import mHeader from '../../../../components/header'
  export default {
    data() {
      return {
        selectData: [],

        stasicData: [],
        text: {}, // 文案
        type: {}, // 选项类型
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData(){
        voteData().then(res => {
          if (res.code === 200) {
            this.stasicData = res.data.satisfaction
            this.text = res.data.type_score
            console.log(this.text)
            this.type = res.data.type
          }
        })
      },
      /*选中样式*/
      checkIndex(index,text_index){
        // 选中的存放到一个空数组里(此时这里的数据是整个被点的所有元素（用索引判断是否存在）)
        const checkArr = this.selectData[index] || [];
        // console.log(checkArr)
        // 用slice取最后到最后一个的索引
        const checkData = checkArr.slice(-1)[0]
        return checkData === text_index;
      },
      chose(index,text_item,text_index,item) {
        /* 塞进（修改）数组=里面，我不知道你为什么之前那么操作 */
        this.$set(this.selectData,index,[
          text_item,  //文字
          item.id,    //父级id
          item.resultId,  //父级id_2
          204,    //好像是固定值
          96701,  //好像是固定值 x2
          text_index //二级选中的索引
        ])
      },
      getParams(){
        // 去掉选择好的数组里的最后一个元素（换个说法就是检测符合最后一个元素的）
        const needValue = this.selectData.filter((item)=>item.slice(0,-1))
        console.log(needValue);
      }
    },
    components:{
      mHeader
    }
  }
</script>
